<!doctype html>
<html>
	<head>
		<title>client side test for node-qrcode</title>
    <!--[if ie]><script type="text/javascript" src="vendors/excanvas/excanvas.js"></script><![endif]-->
		<script src="/build/qrcode.js"></script>
		<style>.b{display:block;}</style>
	</head>
	<body>

		<canvas id="test"></canvas>
		<label for="test-text" class="b">type here and watch it update!:</label>
		<textarea id="test-text" class="b"></textarea>
		<small style="color:#d4d4d4;" class="b">* i did not include jquery on purpose</small>
		<script>
      if(!window.console) window.console = {log:function(){},warn:function(){}};

      var qrcodedraw = new qrcodelib.qrcodedraw();
      //triggered errors will throw
      qrcodedraw.errorBehavior.length = false;
      var drawQR = function(text){
        qrcodedraw.draw(document.getElementById('test'),text,function(error,canvas){
          if(error) {
            if(window.console && window.console.warn) {
              console.warn(error);
            } else {
              alert(error);
            }
          }
        });
      }

      var ta = document.getElementById('test-text'),last=0,lastTime = 1;
      ta.addEventListener('keyup',function(){

  var l = Date.now(),z = this;
  last = l;
  setTimeout(function(){
    //this will kinda lock the browsers event loop for a sec.
    //it could have some setTimeout within processing to make it more client side friendly. or web workers...
    if(l == last) {
      var s=Date.now();
      drawQR(z.value);
      lastTime = Date.now()-s;
    }
  },lastTime+(lastTime/2));
      },false);

  ta.value = 'i work client side too?';
  drawQR('i work client side too?');

		</script>

	</body>
</html>
